<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
   margin:0;
   padding:0;
}
tr,th,td{
    border:1px red solid;
    width:100px;
    height:50px;
    text-align:center;
}
table{      
            
            border:1px red solid;
			border-collapse: collapse;
			text-align:center;
		}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
   function jump(se){
	   var page=$(se).find("option:selected").val();
	   location.href="QueryUserServlet?pageIndex="+page+"&namelike=${sessionScope.namelike}";
   }
   function edit(td){
    	   var userNo2=$(td).parent().parent().children("td").eq(0).text();
    	   var userName=$(td).parent().parent().children("td").eq(1).children().val();
    	   var userPwd=$(td).parent().parent().children("td").eq(2).children().val();
    	  location.href="EditUserServlet?userNo2="+userNo2+"&userName="+userName+"&userPwd="+userPwd;
       }
   function drop(td){
	  var flag=confirm('确定删除吗？');
	  var userNo2=$(td).parent().parent().children("td").eq(0).text();
	  if(flag)
	  location.href="DelUserServlet?only=one&userNo2="+userNo2; 
   }
   /*注意delete是关键字，此处不能使用*/
   function drop1(){
	   return confirm('确定删除吗？');
   }
   function allchoose(){
	   if($("input[name='total']").attr("checked")){
		   $("input[name='choose']").attr("checked",true);
	   }else{
		   $("input[name='choose']").attr("checked",false);
	   }
   }
   $(function(){
	   $("input[name='namelike']").keyup(function(){
		   $.post("SearchUserServlet" ,{keyword:$(this).val()},callback);
	   });
   });
   function callback(data){
	   $("#msg").html("");
	   var names="";
		   var userNames=data.split(";");
		   if(userNames.length>0&&userNames[0].length>0){
			   for(var i=0;i<userNames.length;i++){
				   names+="<div onmouseover='show1(this)' onmouseout='hide1(this)' onclick='write1(this)'>";
				   names+=userNames[i];
				   names+="</div>";
			   }
			   $("#msg").html(names);
			   $("#msg").css('display','block');
		   }else{
			   $("#msg").css('display','none');
		   }	   
   }
   function show1(div){
	   $(div).css('background-color','red');
	   $(div).css('cursor','pointer');
   }
   function hide1(div){
	   $(div).css('background','none');
   }
   function write1(div){
	   $("input[name='namelike']").val($(div).html());
	   $("#msg").css('display','none');
   }
</script>
</head>
<body>
   <c:choose>
     <c:when test="${preDate eq '没有登录过'}">
          用户名${user.userName},${preDate} <a href="loginOut.jsp">注销</a>  
     </c:when>
     <c:otherwise>
          用户名${user.userName},上次登录时间${preDate}<a href="loginOut.jsp">注销</a>
     </c:otherwise>
   </c:choose>
   <input type="button" value="在线用户" onclick="location.href='OnLineUsers.jsp' "/>
   <form action="QueryUserServlet">
      <input type="text" name="namelike"/>
      <input type="submit" value="搜索" ><br/>
      <div id="msg" style="width:171px;border:1px solid red;display:none;"></div>
   </form>
   <form action="DelUserServlet" method="post" onsubmit=" return drop1()" >
      <table>
      <tr>
        <th>用户编号</th>
        <th>用户名</th>
        <th>用户密码</th>
        <th>用户最近登录时间</th>
        <th>操作</th>
      </tr>
      <c:forEach items="${sessionScope.list}" var="n" varStatus="no">
       <tr>
         <!--如果是正在登录用户无法进行相应操作，分两种情况展示-->
         <c:choose>
           <c:when test="${n.userName!=user.userName}">
            <td><input type="checkbox" name="choose" value="${n.userNo2}">${n.userNo2}</td>
            </td>
            <td><input type="text" value="${n.userName}"></td>
            <td><input type="password" value="${n.userPwd}"></td>
            <td>${n.ud}</td>
            <td><input type="button" value="修改" onclick="edit(this)" />
            <input type="button" value="删除" onclick="drop(this)"/></td>
           </c:when>
           <c:otherwise>
            <td>${n.userNo2}</td>
            <td>${n.userName}</td>
            <td>${n.userPwd}</td>
            <td>${n.ud}</td>
            <td>（当前登录用户）</td>
           </c:otherwise>
         </c:choose>
       </tr>  
      </c:forEach>
      <tr>
     <td colspan="7">
         <input type="checkbox" name="total" value=""  onclick="allchoose()" />全选/全不选
         <input type="submit" value="批量删除" />
         <a href="QueryUserServlet?pageIndex=1&namelike=${sessionScope.namelike}">首页</a>
         <a href="QueryUserServlet?pageIndex=${sessionScope.currPage-1}&namelike=${sessionScope.namelike}">上一页</a>
         <a href="QueryUserServlet?pageIndex=${sessionScope.currPage+1}&namelike=${sessionScope.namelike}">下一页</a>
         <!--此处的this代表的是当前的dom对象-->
                  跳转到<select id="select" onchange="jump(this)">
         <c:forEach  var="t" begin="1" end="${totalPages}">
             <option value="${t }">${t}</option>
         </c:forEach>
         </select>
         <!-- <a href="javascript:jump();">go</a>  -->
         <a href="QueryUserServlet?pageIndex=${sessionScope.totalPages}&namelike=${sessionScope.namelike}">尾页</a>
     </td>
  </tr>
   </table>
   </form>
   
</body>
</html>